<template>
  <div class="wrapper">
    <!--  标题栏  -->
    <div class="activitiesWrapper">
      <div class="revertWrapper"><img class="revertImg" src="../../.././assets/static/publicImg/back.png"/></div>
      <div class="activitiesTitleWrapper">
          <span class="myActivities">我的活动</span>
      </div>
      <div class="historyWrapper"><span class="history">历史</span></div>
    </div>
    <!--  内容-无数据  -->
    <div class="noActivitiesWrapper">
      <div class="activitiesImgWrapper">
        <img class="activitiesImg" src="../../../assets/static/activities/box.png" alt="">
      </div>
      <div class="noActivitiesWordWrapper">
        <div class="explainWrapper">
          <span class="noActivities">还没有任何活动！</span>
        </div>
        <div class="secondExplainWrapper">
          <span class="secondNoActivities">当您使用我们的服务时，会在这个里看到活动</span>
        </div>
      </div>
    </div>
    <!--  内容-有数据  -->
    <div class="haveActivitiesWrapper">
      <!--  搜索框  -->
      <div class="selectWrapper">
        <img class="selectImg" src="../../.././assets/static/activitiesHistory/1.svg">
        <span class="select">搜索</span>
      </div>
      <!--  今天的活动记录  -->
      <div class="todayHistoryWrapper">
        <!--  有消费  -->
        <div class="spendWrapper">
          <!--  图标、活动名称及时间  -->
          <div class="spendInfoWrapper">
            <!--  活动图标  -->
            <div class="walletImgWrapper">
              <img class="walletImg" src="../../.././assets/static/activities/s-3.png">
            </div>
            <!--  活动名称及时间  -->
            <div class="sideSpendInfoWrapper">
              <!--  活动名称  -->
              <div class="activitiesNameWrapper">
                <span class="activitiesName">开了B1025机器</span>
              </div>
              <!--  活动时间  -->
              <div class="activitiesTimeWrapper">
                <span class="activitiesTime">10月8日 15:11</span>
              </div>
            </div>
          </div>
          <!--  是否消费  -->
          <div class="whetherToSpendWrapper">
            <img class="whetherToSpendImg" src="../../.././assets/static/activitiesHistory/4.png">
          </div>
        </div>
        <!--  无消费  -->
        <div class="spendWrapper">
          <!--  图标、活动名称及时间  -->
          <div class="spendInfoWrapper">
            <!--  活动图标  -->
            <div class="walletImgWrapper">
              <img class="walletImg" src="../../.././assets/static/activities/s-3.png">
            </div>
            <!--  活动名称及时间  -->
            <div class="sideSpendInfoWrapper">
              <!--  活动名称  -->
              <div class="activitiesNameWrapper">
                <span class="activitiesName">开了B1025机器</span>
              </div>
              <!--  活动时间  -->
              <div class="activitiesTimeWrapper">
                <span class="activitiesTime">10月8日 15:11</span>
              </div>
            </div>
          </div>
          <!--  是否消费  -->
          <div class="whetherToSpendWrapper">
            <img class="whetherToSpendImg" src="../../.././assets/static/activitiesHistory/5.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/styles/mobile/layout.css'

export default {
  components: {}
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.activitiesWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.revertWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.activitiesTitleWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.historyWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.noActivitiesWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.activitiesImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.explainWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.secondExplainWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.haveActivitiesWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.selectWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.todayHistoryWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.spendWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.walletImgWrapper{
   display: flex;
   align-items: center;
   justify-content: center;
 }
.spendInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.sideSpendInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.activitiesNameWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.activitiesTimeWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.whetherToSpendWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.myActivities{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.history{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.noActivities{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 44px;
}
.secondNoActivities{
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  line-height: 44px;
}
.select{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #67C41D;
}
.activitiesName{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.activitiesTime{
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
/*-------------- img图片 -----------------*/
.revertImg{
  width: 17px;
  height: 29px;
}
.activitiesImg{
  width: 335px;
  height: 261px;
}
.selectImg{
  width: 24px;
  height: 22px;
}
.walletImg{
  width: 90px;
  height: 92px;
}
.whetherToSpendImg{
  width: 115px;
  height: 83px;
}
</style>
